<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>
<style>
  [v-cloak] {
    display: none;
    width: 100px;
    height: 100px;
    background-color: aliceblue;
  }
</style>

<body>
  <div id="app">
    <!-- 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。 -->
    <div v-cloak>{{text}}</div>

    <div>
      <!-- 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 -->
      <p v-once> 我是被once了的 结果{{count}}</p>
      <p>结果{{count}}</p>
      <button @click="changeCount">改变count</button>
    </div>

    <div>
      <!-- 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。 -->
      <p v-pre> 我是被pre了的 结果{{count}}</p>
      <p>结果{{count}}</p>
      <button @click="changeCount">改变count</button>
    </div>

  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: "#app",
    data() {
      return {
        text: "信息",
        count: 0
      }
    },
    methods: {
      changeCount() {
        this.count += 1
      }
    }
  })

  // setTimeout(() => {
  //   vm.$mount("#app")
  // }, 2000)

</script>

</html>